<template>
  <div class="fromStyle">
    <el-card style="max-width: 600px">
      <h2>用户注册</h2>
      <el-form :model="formData" ref="loginForm" label-width="auto" style="max-width: 600px">
        <el-form-item label="账号名称" prop="studentId" style="font-size: 18px; color: #333">
          <el-input v-model="formData.studentId" style="width: 240px" placeholder="请输入学号" />
        </el-form-item>

        <el-form-item label="账号密码" prop="websitePw" style="font-size: 18px; color: #333">
          <el-input v-model="formData.websitePw" style="width: 240px" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="websiteNewPw" style="font-size: 18px; color: #333">
          <el-input v-model="formData.websiteNewPw" style="width: 240px" placeholder="请再次输入密码" show-password />
        </el-form-item>
        <el-form-item label="邮箱" prop="email" style="font-size: 18px; color: #333">
          <el-input v-model="formData.email" style="width: 240px" placeholder="请输入邮箱" />
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px">
        <!-- <el-button @click="handleLogin" link> 已有账号？去登录 </el-button> -->
        <el-button type="info" @click="handleLogin" round>登录</el-button>
        <el-button type="success" @click="handleRegister" round>注册</el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from "vue";
  import router from "../router";
  import api from "../axios/api";
  import { ElMessage } from "element-plus";

  const formData = reactive({
    studentId: "",
    websitePw: "",
    websiteNewPw: "",
    email: ""
  });
  const handleRegister = () => {
    if (
      formData.studentId === "" ||
      formData.websitePw === "" ||
      formData.websiteNewPw === "" ||
      formData.email === ""
    ) {
      ElMessage.error("请填写完整信息");
      return;
    }
    if (formData.websitePw !== formData.websiteNewPw) {
      ElMessage.error("两次密码不一致");
      return;
    }

    //长度不为8位
    if (formData.studentId.length !== 10) {
      ElMessage.error("学号格式错误，请输入10位学号");
      return;
    }

    //邮箱格式不正确
    if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(formData.email)) {
      ElMessage.error("邮箱格式不正确");
      return;
    }

    // 学号必须为今年年份的最后两位数字开头，比如2021年，学号可以是21/22/23/24
    const currentYear = parseInt(new Date().getFullYear().toString().slice(-2));
    if (
      currentYear - 4 > parseInt(formData.studentId.slice(0, 2)) ||
      parseInt(formData.studentId.slice(0, 2)) >= currentYear
    ) {
      ElMessage.error(`学号错误，仅限${currentYear - 4}级-${currentYear}级学生注册`);
      return;
    }

    api
      .userRegister(formData.studentId, formData.websitePw, formData.email)
      .then(res => {
        ElMessage.success("注册成功");
        console.log(res);
        // 传递账号密码
        localStorage.setItem("studentId", formData.studentId);
        localStorage.setItem("websitePw", formData.websitePw);
        router.push("/login");
      })
      .catch(err => {
        console.error(err);
        ElMessage.error("注册失败");
      });
  };
  const handleLogin = () => {
    router.push("/login");
  };
</script>
<style lang="less" scoped>
  .fromStyle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../assets/5.jpg");
    background-size: cover;
    background-position: center;

    h2 {
      text-align: center;
      margin-bottom: 10px;
    }

    .LoginButton {
      margin: 0 auto;
      width: 120px;
      height: 40px;
      font-size: 20px;
    }
  }
  .fromStyle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    filter: blur(4px);
    z-index: -1;
  }
</style>
